<template>
	<view class="top">
		<!-- #ifndef APP-PLUS -->
		<u-navbar :is-back="false" :background="{ background: '#EB4D3C' }" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav_left" @click="toSelectCity">
					<text>{{store_areaInform.cityName}}</text>
				<!-- 	<text>北京</text> -->
					<u-icon class="arrow-down" name="arrow-down" size="10"></u-icon>
				</view>
		
				<view class="nav_center">
					<view class="left">
						<u-icon class="search" name="search"></u-icon>
						<text class="text">搜索活动</text>
					</view>
					<u-icon class="mic" name="mic"></u-icon>
				</view>
		
				<view class="nav_right">
					<u-icon class="scan" name="scan" size="40"></u-icon>
				</view>
			</view>
		</u-navbar>
		<!-- #endif -->
		<view class="box">
			<view class="lineCon">
				<view class="l_item">
					<text class="iconfont iconqiandao icon"></text>
					<text>去签到</text>
				</view>
				<view class="l_item">
					<text class="iconfont iconzhiyuanma icon"></text>
					<text>志愿码</text>
				</view>
				<view class="l_item">
					<text class="iconfont iconchaditu icon"></text>
					<text>查地图</text>
				</view>
				<view class="l_item">
					<text class="iconfont iconfayaoqing icon"></text>
					<text>发邀请</text>
				</view>
			</view>
			<view class="menusCon">
				<view class="m_item">
					<text class="iconfont iconzuozhiyuan icon"></text>
					<text>做志愿</text>
				</view>
				<view class="m_item">
					<text class="iconfont iconzhaotuandui icon"></text>
					<text>找团队</text>
				</view>
				<view class="m_item">
					<text class="iconfont iconxuezhishi icon"></text>
					<text>学知识</text>
				</view>
				<view class="m_item">
					<text class="iconfont iconqiubangzhu icon"></text>
					<text>求帮助</text>
				</view>
			<!-- 	<view class="m_item">
					<text class="iconfont iconcalendar icon"></text>
					<text>更多</text>
				</view> -->
			</view>
	
		</view>
	  
	</view>
</template>

<script>
	import uNavbar from 'uview-ui/components/u-navbar/u-navbar.vue'
	import uSearch from 'uview-ui/components/u-search/u-search.vue'
	import uIcon from 'uview-ui/components/u-icon/u-icon.vue'
	export default {
		components: {
			uNavbar,
			uSearch,
			uIcon
		},
		data() {
			return {

			};
		},
		methods: {
			toSelectCity() {
				this.navigateTo({
					url: "/pages/main/citys/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
		@import "@/commom/styles/icons.css";
	.top {
		position: relative;
		// padding-bottom: 20rpx;

		.slot-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex: 1;
			padding: 0 22rpx;
			color: #fff;

			.nav_left {
				display: flex;
				align-items: center;
				min-width: 100rpx;
				height: 100%;
				font-size: 28rpx;
				margin-right: 10rpx;


				.arrow-down {
					margin-top: 5rpx;
					margin-left: 5rpx;
				}
			}

			.nav_center {
				display: flex;
				padding: 0 19rpx;
				flex: 1;
				height: 56rpx;
				background: #C83C2D;
				border-radius: 28rpx;
				color: #F8E9E7;
				font-size: 26rpx;
				align-items: center;
				font-weight: 400;
				justify-content: space-between;

				.left {
					height: 100%;
					display: flex;
					align-items: center;

					.text {
						margin-left: 5rpx;
						line-height: 37rpx;
					}
				}

				.text {
					margin-left: 5rpx;
				}
			}

			.nav_right {
				width: 40rpx;
				margin-left: 10rpx;
			}
		}

		.box {
			width: 100%;
			height: 350rpx;
			background-image: linear-gradient(#EB4D3C, #EB4D3C);
			border-bottom-left-radius: 60% 15%;
			border-bottom-right-radius: 60% 15%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.lineCon {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 62rpx;

				.l_item {
					width: 84rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #fff;
					font-size: 28rpx;
                     
					.icon {
						font-size: 60rpx;
						margin-bottom: 12rpx;
					}
				}
			}

			.menusCon {
				width: 710rpx;
				height: 201rpx;
				// padding: 35rpx 41rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				position: relative;
				display: flex;
				flex-wrap: wrap;

				.m_item {
					display: flex;
					flex-direction: column;
					font-size: 28rpx;
					justify-content: center;
					align-items: center;
					color: #555555;
					flex-basis: 25%;
					// &:nth-child(4n+4) {
					// 	margin-right: 0;
					// }
					>.icon{
						margin-bottom: 12rpx;
						font-size: 56rpx;
					}
					&:nth-child(1) {
						>.icon{
							color: #D7332B;
						}
					}
					&:nth-child(2) {
						>.icon{
							color: #2166F2;
						}
					}
					&:nth-child(3) {
						>.icon{
							color: #E96B37;
						}
					}
					&:nth-child(4) {
						>.icon{
							color: #45AF79;
						}
					}
					&:nth-child(5){
						>.icon{
							color: #BBBBBB;
						}
					}
				}
			}
		}



	}
</style>
